<template>
  <el-card>
    <div class="maxDiv">
      <h3>Tags</h3>
      <div class="labelNum">目前共计{{ num }}个标签</div>
      <div v-loading="loading" class="labelAll">
        <a href="javascript:void(0)">
          <el-tag v-for="(item,index) in labelData" :key="index" :type="type[index%2].type"
                  @click="getlabel(item.articleClassification)">{{ item.articleClassification }}
          </el-tag>
        </a>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "Label",
  data() {
    return {
      loading: true,
      num: '',
      labelData: {},
      type: [
        {type: 'success'},
        {type: 'info'},
        {type: 'warning'},
        {type: 'danger'},
      ],
    }
  },
  mounted() {
    this.getLabelAll();
  },
  methods: {
    getLabelAll() {
      this.$axios.post('articles/getArticlesLabel').then((res) => {
        if (res.data.success) {
          this.labelData = res.data.data;
          this.num = this.labelData.length;
          this.loading = false;
        }
      })
    },
    getlabel(articleClassification) {
      this.$router.push('/blog/labels/' + articleClassification);
    },
  },
}
</script>

<style scoped>
.maxDiv {
  /*width: 100%;*/
  margin: 0 300px;
}

.labelNum {
  color: #7F8085;
  font-weight: 600;
  padding-bottom: 40px;
  text-align: center;
}

.labelAll {
  padding: 0 130px;
  text-align: center;
}

.labelAll .el-tag {
  margin: 2px;
}
</style>